<template>
  <div class="statistics_record">
    <div class="statistics_search">
      <div class="search_box">
        <el-radio-group v-model="timeType">
          <el-radio-button
            v-for="item in timeOptions"
            :key="item.id"
            :label="item.id"
            >{{ item.name }}</el-radio-button
          >
        </el-radio-group>
      </div>
      <div class="search_box">
        <el-date-picker
          v-model="dateTime"
          style="width: 290px;"
          type="daterange"
          clearable
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="dateTimeChange"
        >
        </el-date-picker>
      </div>
      <div 
        class="search_box"
        v-if="roleType !== '2'"
      >
        <el-input
          v-model="featchData.keyword"
          style="width: 180px;"
          :placeholder="'请输入'+childRoleName+'名称'"
        ></el-input>
      </div>
      <div class="search_box">
        <el-button class="seach_btn" type="primary" style="height: 36px;" @click="seach()">搜索</el-button>
        <span @click="resetData()" class="reset_btn">重置</span>
      </div>
    </div>
    <div class="statistics_content">
      <div class="total_data">
        <span class="data_label">本页合计 ：</span>
        <span class="custom_text">注册人数</span>
        <span class="num_data" style="color: #1183FB;">{{ regTotle }}</span>
        <span class="custom_text">人，活跃人数</span>
        <span class="num_data" style="color: #56A500;">{{ activeTotle }}</span>
        <span class="custom_text">人，充值人数</span>
        <span class="num_data" style="color: #1183FB;">{{ payTotle }}</span>
        <span class="custom_text">人，充值金额</span>
        <span class="num_data" style="color: #CF0D17;">{{ payTotleMoney }}</span>
        <span class="custom_text">元。</span>
      </div>
      <page-table-new
        v-if="roleType === '2'"
        :tableData="assistTableDate"
        :total="assistTotal"
        :featchData="assistFeatchData"
        ref="pageTable"
        :tableColumns="assistTableColumns || []"
        @pageChange="assistHandlePageChange"
        @sortChange="assistHandleSortChange"
      >
        <!-- 日期 -->
        <template #day="scope">
          <div>
            {{ dateDayFormat(scope.row.day) }}
          </div>
        </template>
      </page-table-new>
      <page-table-new
        v-else
        :tableData="tableData"
        :featchData="featchData"
        :total="total"
        @pageChange="handlePageChange"
        @sortChange="handleSortChange"
        ref="pageTable"
        :tableColumns="tableColumns || []"
      >
      </page-table-new>
    </div>
  </div>
</template>

<script>
import pageTableNew from "@com/tableNew";
import { TIME_LIST, RECORD_COLUMNS_LIST,PROMOTERS_COLUMNS_LIST } from "../const";
import { formatDate } from "@/utils/validate";
import { agencyCount,assistDateCount } from "@/api/overview";
import { getCookie } from "@/utils/auth";
export default {
  name: 'statisticsRecord',
  components: { pageTableNew },
  data() {
    return {
      timeType: 1, //1: 今日 2昨日：近7日 1: 近1个月 3：近3个月
      roleType: getCookie("roleType"),
      childRoleName:'',
      dateTime: [],
      timeOptions: TIME_LIST,
      tableData: [],
      total: 0,
      tableColumns: RECORD_COLUMNS_LIST,
      featchData: {
        pageSize: 20,
        pageStart: 1,
        keyword:"",
        sortBool: '',
        sortType: "",
      },
      assistTableColumns:PROMOTERS_COLUMNS_LIST,
      assistTableDate:[], //推广员表格数据
      assistTotal:0,
      assistFeatchData: {
        pageSize: 20,
        pageStart: 1,
        sortBool: '',
        sortType: "",
      },
      regTotle:'',
      activeTotle:'',
      payTotle:'',
      payTotleMoney:'',
    };
  },
  created() {
    this.childRoleName = this.$store.state.user.childRoleName;
    this.dateTime = [
      formatDate(new Date(),'yyyy-MM-dd'),
      formatDate(new Date(),'yyyy-MM-dd'),
    ]
    this.tableColumns.forEach(item=>{
      if(item.key === 'name'){
        item.label = this.childRoleName;
      }
    })
  },
  mounted() {
    if(this.roleType === '2'){
      this.getAssistDateCount() // 推广员统计
    }else{
      this.getAgencyCount();  // 推广商推广员收入统计
    }
  },
  watch:{
    timeType:function(val,old){
      var nowDate = new Date();
      switch(val){
        case 1:
          break;
        case 2:
          nowDate =  new Date(new Date().getTime() - 24*60*60*1000);
          break;
        case 3:
          nowDate =  new Date(new Date().getTime() - 24*60*60*1000*7);
          break;
      }
      let d = nowDate.getDate();
      let M = nowDate.getMonth() + 1;
      let y = nowDate.getFullYear();
      if(val === 4){
        M = M - 1;
        this.dateTime = [
          formatDate(new Date(new Date(y+'-'+M+'-'+d).getTime() + 86400000),'yyyy-MM-dd'),
          formatDate(new Date(),'yyyy-MM-dd'),
        ]
      }else if(val === 5){
        M = M - 3;
        this.dateTime = [
          formatDate(new Date(new Date(y+'-'+M+'-'+d).getTime() + 86400000),'yyyy-MM-dd'),
          formatDate(new Date(),'yyyy-MM-dd'),
        ]
      }else{
        this.dateTime = [
          formatDate(new Date(y+'-'+M+'-'+d),'yyyy-MM-dd'),
          formatDate(new Date(),'yyyy-MM-dd'),
        ]
      }
      if(val === 2){
        this.dateTime[1] = this.dateTime[0];
      }
      this.featchData.pageStart = 1;
      this.assistFeatchData.pageStart = 1;
      if(this.roleType === '2'){
        this.getAssistDateCount() // 推广员统计
      }else{
        this.getAgencyCount();  // 推广商推广员收入统计
      }
    }
  },
  computed: {
    dateDayFormat(){
      return function(date){
        if(date){
          return formatDate(new Date(date),'MM-dd')
        }
      }
    }
  },
  methods: {
    dateTimeChange(){
      this.timeType = '';
    },
    handlePageChange(data) {
      this.featchData.pageStart = data.pageSize;
      this.getAgencyCount();
    },
    handleSortChange(data) {
      this.featchData.sortBool = data.sortBool?-1:1;
      this.featchData.sortType = data.sortType;
      this.getAgencyCount();
    },
    assistHandlePageChange(data){
      this.assistFeatchData.pageStart = data.pageStart;
      this.getAssistDateCount();
    },
    assistHandleSortChange(data){
      this.assistFeatchData.sortBool = data.sortBool?-1:1;
      this.assistFeatchData.sortType = data.sortType;
      this.getAssistDateCount();
    },
    getAgencyCount(){
      let data = {
        startAt: this.dateTime[0]?new Date(formatDate(new Date(this.dateTime[0]),'yyyy-MM-dd')+' 00:00:00').getTime():'',
        endAt: this.dateTime[1]?new Date(formatDate(new Date(this.dateTime[1]),'yyyy-MM-dd')+' 23:59:59').getTime():'',
        page: this.featchData.pageStart,
        pageSize: this.featchData.pageSize,
        keyword: this.featchData.keyword,
        sortBool: this.featchData.sortBool,
        sortType: this.featchData.sortType,
      }
      agencyCount(data).then((res)=>{
       if(res.code === 0){
          this.tableData = res.data.values;
          this.total = res.data.total;
          this.regTotle = res.data.regtotle;
          this.activeTotle = res.data.activetotle;
          this.payTotle = res.data.paytotle;
          this.payTotleMoney = res.data.paytotlemoney;
        } else {
          this.$message.error(res.message);
        }
      })
    },
    getAssistDateCount(){
      let data = {
        startAt: this.dateTime[0]?new Date(formatDate(new Date(this.dateTime[0]),'yyyy-MM-dd')+' 00:00:00').getTime():'',
        endAt: this.dateTime[1]?new Date(formatDate(new Date(this.dateTime[1]),'yyyy-MM-dd')+' 23:59:59').getTime():'',
        page: this.assistFeatchData.pageStart,
        pageSize: this.assistFeatchData.pageSize,
        sortBool: this.assistFeatchData.sortBool,
        sortType: this.assistFeatchData.sortType,
      }
      assistDateCount(data).then((res)=>{
       if(res.code === 0){
          this.assistTableDate = res.data.values;
          this.assistTotal = res.data.total;
          this.regTotle = res.data.regtotle;
          this.activeTotle = res.data.activetotle;
          this.payTotle = res.data.paytotle;
          this.payTotleMoney = res.data.paytotlemoney;
        }else{
          this.$message.error(res.message);
        }
      })
    },
    //重新搜索
    resetData() {
      this.featchData = {pageSize: 20,pageStart: 1,keyword:"",sortBool: '',sortType: "",};
      this.assistFeatchData = {pageSize: 20,pageStart: 1,sortBool: '',sortType: "",};
      this.$refs.pageTable.clearSort();
      this.$nextTick(()=>{
        this.seach();
        this.timeType = 1;
      })
    },
    seach(){
      this.timeType = '';
      this.featchData.pageStart = 1;
      this.assistFeatchData.pageStart = 1;
      if(this.roleType === '2'){
        this.getAssistDateCount() // 推广员统计
      }else{
        this.getAgencyCount();  // 推广商推广员收入统计
      }
    }
  }
};
</script>
<style lang="scss"></style>
<style lang="scss" scoped>
.statistics_record {
  margin-bottom: 20px;
  .statistics_search {
    height: 36px;
    .search_box {
      display: inline-block;
      vertical-align: top;
      margin-right: 6px;
      .reset_btn {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #777777;
        text-align: justify;
        margin-left: 12px;
        cursor: pointer;
      }
    }
  }
  .total_data {
    font-size: 14px;
    margin: 0 0 16px 0;
    line-height: 22px;
    height: 22px;
    box-sizing: border-box;
    .data_label {
      font-family: PingFangSC-Semibold;
      color: #404040;
      font-weight: 600;
    }
    .custom_text {
      font-family: PingFangSC-Regular;
      color: #404040;
    }
    .num_data {
      font-weight: 600;
    }
  }
  .statistics_content {
    margin-top: 16px;
    background: #fff;
    box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.09);
    border-radius: 4px;
    padding: 16px 16px 0 16px;
  }
}
</style>
